<template>
  <!-- 内容 -->
  <div class="contentbg">
    <div class="channelpp">
      <img src="../../../assets/img/pp_contact.jpg" alt="" />
    </div>
    <!--  -->
    <div class="centernav2">
      <!--  -->
      <div class="channelleft">
        <div class="channeltitle">
          <img src="../../../assets/img/channeltitle_services.png" alt="" />
        </div>
        <div class="channelname">
          <div class="unfocus-content" id="c1">
            <router-link to="/app/service">
              <span>-{{ $t("msg.navbar.children.serviceA") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="unfocus-content" id="c2">
            <router-link to="/app/fw1">
              <span>-{{ $t("msg.navbar.children.serviceB") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="unfocus-content" id="c2">
            <router-link to="/app/fw2">
              <span>-{{ $t("msg.navbar.children.serviceC") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="unfocus-content" id="c2">
            <router-link to="/app/fw3">
              <span>-{{ $t("msg.navbar.children.serviceD") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="unfocus-content" id="c2">
            <router-link to="/app/fw4">
              <span>-{{ $t("msg.navbar.children.serviceE") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="focus-content" id="c2">
            <router-link to="/app/lj">
              <span>-{{ $t("msg.navbar.children.serviceF") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="unfocus-content" id="c2">
            <router-link to="/app/dl">
              <span>-{{ $t("msg.navbar.children.serviceG") }}</span>
            </router-link>
          </div>
          <div class="line1"></div>
          <div class="leftbanner">
            <a href="">
              <img
                src="../../../assets/phone.jpg"
                alt=""
                width="256"
                height="50"
              />
            </a>
          </div>
          <div class="leftbanner">
            <a href="">
              <img src="../../../assets/img/leftbanner2.png" alt="" />
            </a>
          </div>
        </div>
      </div>
      <div class="line2"></div>
      <!--  -->
      <div class="channelright">
        <div class="location">
          <div class="hpico">
            <img src="../../../assets/img/homepageico.png" alt="" />
          </div>
          <div class="locationadd">
            {{ $t("msg.homepage") }} -{{ $t("msg.navbar.children.serviceF") }}
          </div>
        </div>
        <div class="pagecontent">
          <div
            id="inputSuccess_1"
            class="is_success"
            style="display: none"
          ></div>
          <div
            id="inputFailure_1"
            class="is_failure"
            style="display: none"
          ></div>
          <!-- 表单数据 -->
          <div class="formtext">{{ $t("msg.DetailedList.nameA") }}</div>
          <el-upload
            class="upload"
            drag
            :on-success="handleAvatarSuccess"
            :action="uploadUrl"
            :before-upload="andleAvatarSuccess"
          >
            <span class="box_text"
              >{{ $t("msg.DetailedList.item0") }}：csv，xls</span
            >
          </el-upload>
          <!-- 表单 -->
          <div id="form">
            <el-form
              label-position="right"
              ref="LJformRef"
              label-width="100px"
              :model="LJform"
              hide-required-asterisk
            >
              <!-- 规格型号 -->

              <el-form-item
                prop="model"
                :label="$t(`msg.DetailedList.item1`)"
                :rules="[
                  {
                    required: true,
                    message: $t(`msg.DetailedList.li1`),
                    trigger: 'blur',
                  },
                ]"
              >
                <div style="width: 300px">
                  <el-input v-model="LJform.model" placeholder=""></el-input>
                </div>
              </el-form-item>
              <!-- 厂商品牌 -->
              <el-form-item
                :label="$t(`msg.DetailedList.item2`)"
                prop="brand"
                :rules="[
                  {
                    required: true,
                    message: $t(`msg.DetailedList.li2`),
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="LJform.brand" placeholder=""></el-input>
              </el-form-item>
              <!-- 数量 -->

              <el-form-item
                prop="amount"
                :label="$t(`msg.DetailedList.item3`)"
                :rules="[
                  {
                    required: true,
                    message: $t(`msg.DetailedList.li3`),
                    trigger: 'blur',
                  },
                ]"
              >
                <div style="width: 100px">
                  <el-input v-model="LJform.amount" type="number"></el-input>
                </div>
              </el-form-item>
              <!-- 备注 -->
              <el-form-item
                prop="remarks"
                :label="$t(`msg.DetailedList.item4`)"
                :rules="[
                  {
                    required: true,
                    message: $t(`msg.DetailedList.li4`),
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input
                  v-model="LJform.remarks"
                  placeholder=""
                  type="textarea"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="submitForm()" class="">{{
                  $t("msg.DetailedList.submit")
                }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { uploadUrl } from "../../../config/config";
import { serviceSCDL } from "../../../api/Serve";
const LJform = reactive({
  model: "",
  brand: "",
  amount: "",
  remarks: "",
});
const LJformRef = ref(null);

const submitForm = () => {
  LJformRef.value.validate((valid) => {
    if (valid) {
      serviceSCDL(LJform).then((res) => {
        console.log(res);
        LJformRef.value.resetFields();
      });
      ElMessage.success("表单提交成功 !");
    } else {
      ElMessage.error("请把表单补充完整 !");
      return false;
    }
  });
};
//上传文件之前先判断该文件是否是Excel文件
const andleAvatarSuccess = (file) => {
  console.log(file);
  const Xls = file.name.split(".");
  if (Xls[1] === "xls" || Xls[1] === "xlsx" || Xls[1] === "csv") {
    // ElMessage.success("正在上传！");
    return file;
  } else {
    ElMessage.error("请上传excel格式的文件!");
    return false;
  }
};
// 上传的回调
const handleAvatarSuccess = (res) => {
  // console.log(res);
  if (res.code == 200) {
    ElMessage.success("导入成功!");
  } else {
    ElMessage.warning("导入失败!");
  }
};
</script>

<style lang="scss" scoped>
.contentbg {
  width: 1200px;
  overflow: hidden;
  margin: 0px auto;
  background: url(@/assets/contentbg.png);
  background-repeat: repeat-y;
  font-size: 12px;
  .channelpp {
    width: 100%;
    text-align: center;
    height: 240px;
    img {
      margin-top: 11px;
    }
  }

  //

  .centernav2 {
    width: 1000px;
    margin: 0px auto;
    overflow: hidden;
    .channelleft {
      width: 310px;
      float: left;
      overflow: hidden;
      img {
        margin: 0;
        padding: 0;
        border: none;
      }

      .channelname {
        width: 262px;
        overflow: hidden;
        margin: 16px auto;
        .focus-content {
          width: 262px;
          margin: 0px auto;
          height: 45px;
          line-height: 45px;
          overflow: hidden;
          font-size: 13px;
          background: url(../../../assets/img/focusjt.png);
          font-weight: bold;

          span {
            margin-left: 50px;
          }
        }
        .line1 {
          width: 262px;
          height: 1px;
          font-size: 1px;
          overflow: hidden;
          background: url(../../../assets/img/line.gif);
          margin: 0px auto;
        }
        .unfocus-content {
          width: 262px;
          margin: 0px auto;
          height: 45px;
          line-height: 45px;
          overflow: hidden;
          font-size: 13px;
          background: url(../../../assets/img/unfocusjt.png);
          font-weight: bold;

          span {
            margin-left: 50px;
          }
        }
        .leftbanner {
          width: 100%;
          margin: 12px auto;
          text-align: center;
          img {
            margin: 0;
            padding: 0;
            border: none;
          }
        }
      }
    }
    .line2 {
      height: 400px;
      width: 30px;
      overflow: hidden;
      float: left;
      background: url(../../../assets/img/line2.jpg);
      background-repeat: no-repeat;
      background-position: top center;
    }
    .channelright {
      width: 660px;
      float: left;
      overflow: hidden;
      .location {
        width: 90%;
        height: 30px;
        line-height: 30px;
        background: #f6f5fe;
        margin: 12px auto;
        .hpico {
          width: 10%;
          height: 30px;
          text-align: center;
          float: left;
        }
        .locationadd {
          width: 90%;
          float: left;
          height: 30px;
          text-align: left;
        }
      }
      .pagecontent {
        width: 85%;
        font-size: 13px;
        margin: 35px auto;
        overflow: hidden;
        line-height: 30px;
        color: #333;
        text-align: justify;
        div {
          text-align: center;
        }
        .is_success {
          margin: 0 auto;
          font: 14px Arial, Helvetica, sans-serif;
          color: #090 !important;
          padding: 10px 10px 10px 45px;
          width: 90%;

          text-align: left;
          line-height: 160%;
          font-weight: bold;
        }
        .is_failure {
          margin: 0 auto;
          font: 14px Arial, Helvetica, sans-serif;
          color: #cc0000 !important;
          padding: 10px 10px 10px 45px;
          width: 90%;

          text-align: left;
          line-height: 160%;
          font-weight: bold;
        }
        .formtext {
          width: 100%;
          height: 30px;
          overflow: hidden;
          line-height: 36px;
          font-size: 14px;
        }
        .formsibmitdiv {
          width: 297px;
          height: 40px;
          overflow: hidden;
          margin: 30px auto;
          .is_btn {
            width: 297px;
            height: 40px;
            background-repeat: no-repeat;
            overflow: hidden;
            border: 0;
          }
        }
        .forminputdiv {
          .input_text {
            width: 230px;
            height: 30px;
            background: url(../../../assets/inputtextbg.png);
            background-repeat: no-repeat;
            overflow: hidden;
            border: 0;
          }
          .textarea {
            width: 507px;
            height: 73px;
            background: url(../../../assets/inputtextbg2.png);
            background-repeat: no-repeat;
            overflow: hidden;
            border: 0;
          }
        }
        .formspace {
          width: 100%;
          height: 40px;
        }
        .form50per {
          width: 50%;
          overflow: hidden;
          float: left;
          .formtext {
            width: 100%;
            height: 30px;
            overflow: hidden;
            line-height: 36px;
            font-size: 14px;
          }
          .forminputdiv {
            .input_file {
              width: 400px;
            }

            .input_text {
              width: 230px;
              height: 30px;
              background: url(../../../assets/inputtextbg.png);
              background-repeat: no-repeat;
              overflow: hidden;
              border: 0;
            }
          }
        }
        .clearboth {
          clear: both;
        }
        .formtext {
          width: 100%;
          height: 30px;
          overflow: hidden;
          line-height: 36px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
